<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OCR文字识别</title>
  <script src='/src/renderer/src/utils/tesseract.min.js'>
    //使用CDN加载tesseract，如若失效，请自行查找替换
  </script>
</head>
<body>
<h1>OCR文字识别</h1>

<img id="uploadedImage">
<input type="file" id="imageInput" accept="image/png,image/jpeg,image/jpg" width="100%">
<h1>OCR文字识别结果</h1>
<span name="" id="resultMsg" cols="30" rows="10"></span>


<script>
  // 监听图片输入字段的改变事
  document.getElementById('imageInput').addEventListener('change', function(e) {


    // (async () => {
    //   const worker = await Tesseract.createWorker('chi_sim');
    //   const ret = await worker.recognize('/1fd02559aaf7e074e805054500869bbc.png');  // 接受图片url
    //   // const ret = await worker.recognize(e.target.files[0]);  // 接受 file对象
    //   document.getElementById('resultMsg').innerText = ret.data.text;
    //   await worker.terminate();
    // })();
    // return

    // 获取用户选择的文件
    var file = e.target.files[0]
    if (file) {
      var reader = new FileReader()
      // 当文件读取完成时，创建一个Image对象并设置其src属性，然后处理图片加载完成的事件
      reader.onload = function(e) {
        var image = new Image()
        image.src = e.target.result
        // 当图片加载完成后，显示图片并进行文字识别
        image.onload = function() {
          //预览图片
          document.getElementById('uploadedImage').src = image.src

          // 使用Tesseract.js进行文字识别
          Tesseract.recognize(
            image,  // 只接受file对象
            'chi_sim',  // 中文简体
            {
              logger: info => console.log(info)
            }
          ).then(result => {
            console.log('【识别结果】', result.data.text)
            // 将识别结果文本输入到页面元素中
            if (result && result.data.text) {
              document.getElementById('resultMsg').innerText = result.data.text
            } else {
              console.error('【错误】无法从识别结果中检索文本')
            }
          })
        }
      }

      reader.readAsDataURL(file)
    }
  })

</script>
</body>

</html>
